<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=120.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes"/>
    <title>Title</title>
</head>
<body>
<section>
    <h4>px, em, rem, vw(vh), %</h4>
    <ul>
        <li>px：绝对单位，页面按精确像素展示</li>
        <li>em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值</li>
        <li>rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算</li>
        <li>vw(vh)：主要用于页面视口大小布局，在页面布局上更加方便简单</li>
        <li>%：百分比宽泛的讲是相对于父元素（看下面三条）</li>
        <li>对于普通定位元素就是我们理解的父元素</li>
        <li>对于position: absolute;的元素是相对于已定位的父元素</li>
        <li>对于position: fixed;的元素是相对于 ViewPort（可视窗口）</li>
    </ul>
</section>
<section>
    <h4>像素</h4>
    <ul>
        <li>设备像素比为1:1时，1个CSS像素 = 1个设备独立像素 = 1设备像素</li>
        <li>设备像素比为2:1时，1个CSS像素 = 1个设备独立像素 = 2设备像素</li>
        <li>设备像素比为3:1时，1个CSS像素 = 1个设备独立像素 = 3设备像素</li>
        <li>每英寸像素(PPI) (受屏幕分辨率和尺寸影响)</li>
        <li>设备像素比(DPR) (受缩放影响，这里的缩放可能是浏览器缩放，也可能是分辨率缩放)</li>
    </ul>
</section>
<section>
    <h4>设备像素</h4>
    <ul>
        <li>设备像素 = 物理像素 （设备像素的单位：pt）</li>
        <li>设备独立像素 = window.screen.width / window.screen.height （它是虚拟像素）</li>
        <li>DPR = 设备像素 / 设备独立像素 （可以通过window.devicePixelRatio获取）</li>
        <li>每英寸像素 <img src="./PPI.jpg" alt="PPI"></li>
    </ul>
</section>
<section>
    <h4>例子2</h4>
    <ul>
        <li>结论：要适配无需考虑屏幕尺寸，要考虑屏幕分辨率(window.screen.width * window.devicePixelRatio = 分辨率宽)</li>
        <li>使用postcss-px-to-viewport 将px 转换成视宽</li>
        <li>使用postcss-px2vw          将px 转换成视宽</li>
        <li>对于字体来说，浏览器最小就要显示12px大小。</li>
        <li>UI出设计的时候，要考虑如果是1920*1080的字体为12px的时候，1366*768是否要小于12px</li>
        <li>如果PC项目已经使用px，有以下两种方式处理可以响应式</li>
        <li>A:字体转rem，其他转vw(vh)</li>
        <li>B:全部转vw(vh)，涉及字体的样式需要微调</li>
        <li>移动端需要移动端的设计，不推荐使用pc的像素，尺寸</li>
    </ul>
</section>
<section>
    <h4>postcss-px-to-viewport</h4>
    <ul>
        <li>不转换行内样式？</li>
        <li>如何处理字体？</li>
        <li>如果真需要转换字体，就必须使用rem。将字体全部设置成rem，而且要监听屏幕改变重新设置font-size</li>
    </ul>
</section>
<script>

</script>
</body>
</html>
